<template lang="pug">
div(class="aw-emoji-items" v-if="menu")
    a(href="javascript:void(0)" 
      v-for="emotion in menu.items" 
      @click.stop="emotionTab(emotion)" 
      :title="emotion[2]"
      class="aw-emoji aw-emoji-item")
        img(src="./img/blank.gif" 
            :class="`aw-emoji-items-emotion-${menu.name}`" 
            :style="cal_img_bg_style(emotion, menu)")
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    menu: { type: Object }
  },
  methods: {
    emotionTab(emotion) {
      this.$emit("emotion-tab", emotion); // 出发事件
    },
    /** 计算背景数据 */
    cal_img_bg_style(item, menu) {
      var style = `background-position: ${item[0]}px ${item[1]}px`;
      return style;
    }
  }
};
</script>

<style lang="less" scoped>
.aw-emoji-items {
  a {
    margin: -1px 0 0 -1px;
    padding: 5px;
    display: block;
    float: left;
    border-radius: 2px;
    border: 0;
  }

  a:hover {
    background-color: #edf2f5;
  }
  &-emotion-smile {
    background: url(./img/emoji_spritesheet_0.png) no-repeat;
    background-size: 675PX 175PX;
  }
  &-emotion-flower {
    background: url(./img/emoji_spritesheet_1.png) no-repeat;
    background-size: 725PX 100PX;
  }
  &-emotion-bell {
    background: url(./img/emoji_spritesheet_2.png) no-repeat;
    background-size: 825PX 175PX;
  }
  &-emotion-car {
    background: url(./img/emoji_spritesheet_3.png) no-repeat;
    background-size: 850PX 75PX;
  }
  &-emotion-grid {
    background: url(./img/emoji_spritesheet_4.png) no-repeat;
    background-size: 850PX 175PX;
  }
  &-emotion-smile,
  &-emotion-flower,
  &-emotion-bell,
  &-emotion-car,
  &-emotion-grid {
    width: 25PX;
    height: 25PX;
    display: inline-block;
  }
}
</style>
